<script lang="ts">
import { defineComponent, watch, ref, reactive } from "vue";
import { UserModule } from "@/store/modules/user";
import { getRecord2List } from "@/api";

export default defineComponent({
    props: {
        recordType: {
            type: Number,
            default: 0,
        },
    },
    setup(props) {
        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list = ref([]);
        const onLoad = async () => {
            const res = await getRecord2List({
                pageNum: setat.pageNum - 1,
                pageSize: setat.pageSize,
                recordType: props.recordType,
            });
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = res.data.data.Record2List || [];
            setat.total = res.data.data.Total;
            loading.value = false;
            // setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const onRefresh = () => {
            setat.pageNum = 1;
            // finished.value = false;
            refreshing.value = true;
            loading.value = true;
            onLoad();
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            setat,
            list,
            refreshing,
            loading,
            finished,
            onLoad,
            onRefresh,
        };
    },
});
</script>

<template>
    <div class="logs">
        <div class="name">
            <img src="@/assets/image/image1.png" alt="" srcset="">
            {{$t('layout.DistributionRecord')}}
        </div>
        <div class="list">
            <div class="title">
                <span>{{$t('layout.DistributionTime')}}</span>
                <div class="right">
                    <span>HF{{$t('layout.Quantity')}}</span>
                    <span v-if="recordType < 5">{{$t('layout.Value')}}$</span>
                </div>
            </div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')" @load="onLoad" disabled>
                    <ul>
                        <li v-for="(item,index) in list" :key="index">
                            <div class="time">{{item.CreatedAt}}</div>
                            <div class="right">
                                <div class="value">{{item.Amount}}</div>
                                <div class="USDT" v-if="recordType < 5">{{item.USDT}}</div>
                            </div>
                        </li>
                    </ul>
                </van-list>
            </van-pull-refresh>
        </div>
        <van-pagination v-model="setat.pageNum" :total-items="setat.total" :show-page-size="6" :items-per-page="setat.pageSize" @change="onLoad" />
    </div>
</template>

<style lang="less" scoped>
.logs {
    margin-top: 20px;
    .name {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 15px;
        color: #ffffff;
        img {
            margin-right: 8px;
            width: 15px;
        }
    }
    .list {
        margin-top: 12px;
        background: #222328;
        padding: 6px 15px 0 15px;
        border-radius: 12px;
        .title {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            span {
                font-weight: 400;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.5);
            }
            .right {
                display: flex;
                justify-content: space-between;
                span {
                    flex: 70px 0 0;
                    width: 70px;
                    text-align: center;
                }
            }
        }
        ul {
            li {
                padding: 20px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px dashed rgba(56, 56, 56, 1);
                .time {
                    font-weight: 400;
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.5);
                }
                .value {
                    font-weight: bold;
                    font-size: 15px;
                    color: #9372ff;
                }
                .USDT {
                    font-weight: bold;
                    font-size: 15px;
                    color: #ffffff;
                }
                .right {
                    display: flex;
                    justify-content: space-between;
                    .value,
                    .USDT {
                        flex: 70px 0 0;
                        width: 70px;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
